<template>
  <div class="comment-area">
    <div class="comment-area-left">
      <el-avatar fit="contain" :icon="UserFilled" class="title-icon"/>
    </div>
    <div class="comment-area-right">
      <h3>{{ name }}</h3>
      <h4><span style="color: #67C23A;">{{ date_ }}</span><span v-if="at"> @{{ at }}</span></h4>
      <div class="text">
        <p>{{ text }}</p>
      </div>
      <el-button type="primary" link @click="switchClick">{{ replyable ? '取消回复':'回复' }}</el-button>
      <slot></slot>
      <CommentAreaItemEdit :editable="replyable" @reply-emits="replyClick"/>
    </div>
  </div>
</template>

<script setup>
import { UserFilled } from '@element-plus/icons-vue'
import CommentAreaItemEdit from './CommentAreaItemEdit.vue';
import { ref, computed } from 'vue';
import { dateDisplay } from '../features/DateTools';

const props = defineProps({
  name: {
    type: String,
    default: 'Unknown'
  },
  date: {
    type: String,
    default: '2023-01-01'
  },
  at: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: 'Test'
  }
})

// 计算日期
const date_ = computed(() => dateDisplay(props.date))


// 当前编辑框可视性
const replyable = ref(false)

const emits = defineEmits(['switchEdit','replySend'])

// 传出 当前编辑框可视性
// 由回复按钮触发
const switchClick = () => {
  replyable.value = !replyable.value
  emits('switchEdit', replyable.value)
}

// 传出 编辑框内容
// 由发送按钮触发
const replyClick = (val) => {
  emits('replySend', { text: val, at: props.name })
}

// 暴露replyable
defineExpose({replyable})
</script>

<style scoped>
.comment-area-left {
  height: 100%;
  width: 50px;
  float: left;
}
.comment-area-right {
  height: 100%;
  width: calc(100% - 50px);
  float: left;
}
.comment-area-right > h3,h4{
  color: #409EFF;
}
.text {
  margin: 1rem 0;
}
</style>

<style>
.comment-area {
  display: inline-block;
  height: 100%;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  margin-top: .5rem;
  padding: 1.5rem;
  box-shadow: var(--el-box-shadow);
  border-radius: .25rem;
  border: 1px solid #ebeef5cc;
}
.title-icon {
  background-color: #fff;
  color: #409EFF;
  box-shadow: var(--el-box-shadow-dark);
}
</style>